{layout name="layout" /}

<style>
    .table td a {
        text-decoration: none;
    }
</style>

<div class="Hui-article">
    <div class="pd-20">
        <div class="text-c" style="margin-right: 10%;">
            <form action="" method="GET" id='search_form'>
                <!-- 日期范围：
                <input type="date" id="logmin" class="input-text Wdate" style="width:150px;">
                -
                <input type="date" id="logmax" class="input-text Wdate" style="width:150px;"> -->
                <input type="text" name="title" id="title" value="{notempty name='title'}{$title}{/notempty}" placeholder=" 文章名称" style="width:250px" class="input-text">
                <button name="t_button" id="t_button" class="btn btn-success" type="button">
                <i class="Hui-iconfont">&#xe665;</i> 搜文章</button>
                <a href="{:url('/blog_article/index')}" class="btn btn-danger">清除条件</a>
            </form>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20" style=" min-width: 1000px; max-width: 90%;">
            <span class="l">
                <a href="javascript:;" onclick="del_all()" class="btn btn-danger radius">
                    <i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>
                <a href="{:url('/blog_article/add')}" class="btn btn-primary radius">
                    <i class="Hui-iconfont">&#xe600;</i>添加文章</a>
            </span>
            <span class="r">
                <a href="{:url('/blog_article/trash')}" class="btn btn-danger radius">
                    <i class="Hui-iconfont">&#xe6e2;</i>回收站</a>
            </span>
        </div>
        <div class="mt-20" style=" min-width: 950px; max-width: 90%;">
            <table class="table table-border table-bordered table-bg table-hover table-sort">
                <thead>
                    <tr class="text-c">
                        <th width="20px">
                            <input type="checkbox" value="" name="allcheck">
                        </th>
                        <th width="40px">ID</th>
                        <th >文章标题</th>
                        <th width="100px">
                            <select id="category" name="cid" class="search">
                                <option value="0" {notempty name="cid"}{eq name='cid' value="0"}selected{/eq}{/notempty}>--栏目-- </option>
                                {foreach $categories as $key=>$value}
                                <option value="{$key}" {notempty name="cid"}{eq name='cid' value="$key"}selected{/eq}{/notempty} class="text-c">&nbsp;&nbsp;&nbsp; {$value} </option>
                                {/foreach}
                            </select>
                        </th>
                        <th width="150px">更新日期</th>
                        <th width="80px">
                            <select id="top" name="top" class="search">
                                <option value="0" {eq name="top" value="0"}selected{/eq}>--状态1--</option>
                                <option value="1" {eq name="top" value="1"}selected{/eq}>非置顶</option>
                                <option value="2" {eq name="top" value="2"}selected{/eq}>置顶</option>
                            </select>
                        </th>
                        <th width="80px">
                            <select id="status" name="status" class="search">
                                <option value="0" {eq name="status" value="0"}selected{/eq}>--状态2--</option>
                                <option value="1" {eq name="status" value="1"}selected{/eq}>--正常--</option>
                                <option value="2" {eq name="status" value="2"}selected{/eq}>--下线--</option>
                            </select>
                        </th>
                        <th width="40px">点击量</th>
                        <th width="120px">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $data as $val}
                    <tr class="text-c va-m">
                        <td>
                            <input type="checkbox" value="{$val.id}" name="checkbox[]">
                        </td>
                        <td>{$val.id}</td>
                        <td class="text-l">
                            <a href="{$Think.config.url_blog_root}/{$val.pubtime|date='Y/m/d', ###}/{$val.id}" style="text-decoration:none" title="浏览"
                                target="_blank">{$val.title}</a>
                        </td>
                        <td class="text-c">{$categories[$val.cid]}</td>
                        <td class="text-c">{$val.pubtime|date="Y-m-d H:i:s",###}</td>
                        <td class="td-status">
                            {eq name='val.top' value='2'}
                            <a href="javascript:void(0);" title="取消置顶" data-value='{$val.top}' data-id='{$val.id}' data-field='top' class="top_status"><span class="label label-success radius">置顶</span></a>
                            {else /}
                            <a href="javascript:void(0);" title="置顶" data-value='{$val.top}' data-id='{$val.id}' data-field='top' class="top_status"><span class="label label-default radius">未置顶</span></a>
                            {/eq}
                        </td>
                        <td class="td-status">
                            {eq name="val.status" value="1"}
                            <a href="javascript:void(0);" title="下线" data-value='{$val.status}' data-id='{$val.id}' data-field='status' class="top_status"><span class="label label-success radius">正常</span></a>
                            {else/}
                            <a href="javascript:void(0);" title="上线" data-value='{$val.status}' data-id='{$val.id}' data-field='status' class="top_status"><span class="label label-default radius">已下线</span></a>
                            {/eq}
                        </td>
                        <td>{$val.clicks}</td>
                        <td class="td-manage">
                            <a href="{:url('/blog_article/edit', 'id='.$val.id)}" title="编辑"
                                style="text-decoration:none" class="ml-10">
                                <i class="Hui-iconfont">&#xe6df;</i>
                            </a>
                            <a href="javascript:;" title="删除" style="text-decoration:none" class="ml-10"
                                onClick="del(this,'{$val.id}')">
                                <i class="Hui-iconfont">&#xe6e2;</i>
                            </a>
                        </td>
                    </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
        <div class="cl pd-5 bg-1 bk-gray mt-20" style="max-width: 90%;">
            <span class="l">共
                <strong>{$counts}</strong> 篇, {$pages} 页 </span>
            <span class="l" style="margin-left: 10px;">
                <select id="num_of_page" name="num_of_page" class="search">
                    <option value="10" {eq name="num_of_page" value="10"}selected{/eq}>10</option>
                    <option value="20" {eq name="num_of_page" value="20"}selected{/eq}>20</option>
                    <option value="50" {eq name="num_of_page" value="50"}selected{/eq}>50</option>
                </select>
            </span>
            <span class="r">
                <ul class="pagination">
                    {neq name="page" value="1"}
                        <li><a href="javascript:gotoPage({$page-1})"> « </a></li>
                    {/neq}
                    {for start="1" end="$pages+1" comparison="lt" step="1" name="gpage"}
                        {eq name="page" value="$gpage"}
                        <li><a href="javascript:void(0);" class="active">{$gpage}</a></li>
                        {else}
                        <li><a href="javascript:gotoPage({$gpage})">{$gpage}</a></li>
                        {/eq}
                    {/for}
                    {neq name="page" value="$pages"}
                        <li><a href="javascript:gotoPage({$page+1})"> » </a></li>
                    {/neq}
                </ul>
            </span>
        </div>
    </div>
</div>

<!-- 请在下方写此页面业务相关的脚本 -->
<script type="text/javascript">
/* 删除列表条目 */
function del(obj, id) {
    layer.confirm('确认要删除吗？', function (index) {
        $.post('/blog_article/del', {
            'id': id
        }, function (data) {
            if (data.code == 2) {
                $(obj).parents("tr").remove();
                layer.msg(data.msg, {
                    icon: 1,
                    time: 1000
                });
            } else {
                layer.msg(data.msg, {
                    icon: 5,
                    time: 2000
                });
                return false;
            }
        }, 'json');
    });
}


/* 删除列表多选条目 覆盖admin.js里的del_all() */
function del_all() {
    var checkbox = $('.text-c input[name="checkbox[]"]');
    var ids = new Array();
    checkbox.each(function (x) {
        if (this.checked)
            ids.push(this.value);
    })

    var length = ids.length;

    if (length == 0) {
        layer.msg('请选择要删除的选项', {
            icon: 5,
            time: 1000
        });
        return false;
    }

    layer.confirm('确认要删除吗？', function (index) {
        $.post('/blog_article/del', {
            'id': ids
        }, function (data) {
            if (data.code == 2) {
                checkbox.each(function (x) {
                    if (this.checked)
                        $(this).parents("tr").remove();
                })
                layer.msg(data.msg, {
                    icon: 1,
                    time: 1000
                });
            } else {
                layer.msg(data.msg, {
                    icon: 5,
                    time: 2000
                });
                return false;
            }
        }, 'json');
    });
}

    function getQuery() {
        var query = "";
        var cid = $("#category").val();
        var top = $("#top").val();
        var status = $("#status").val();
        var num_of_page = $("#num_of_page").val();
        var title = $("#title").val();
        
        query = 'cid='+cid+'&top='+top+'&status='+status+'&num_of_page='+num_of_page+"&title="+title;

        return query;
    }

    function gotoPage(gpage)
    {
        query = getQuery();

        window.location.href="/blog_article/index/"+gpage+".html?"+query;
    }


    /* 条件筛选: 置顶 or 上线 or 审核 .... */ 
    $(function () {
        // 时间范围: 最大时间不能比最小时间小
        $('#datemax').change(function () {
            var date1 = $('#datemin').val();
            var date2 = $('#datemax').val();
            var oDate1 = new Date(date1);
            var oDate2 = new Date(date2);

            if (oDate1.getTime() > oDate2.getTime()) {
                $('#datemax').val(date1);
            }
        });
        $(".search").on('change', function() {
            query = getQuery();

            window.location.href="/blog_article/index.html?"+query;
        });

        $("#t_button").click(function() {
            query = getQuery();

            window.location.href="/blog_article/index.html?"+query;
        });
    });


/* ajax 改变 status & top 值 */
$('.top_status').click(function(){
    var data = $(this).data();
    var id = data.id;
    var field = data.field;
    // console.log(data);

    if (field=='top') {
        var value = 2;
        var status = '置顶';
        var title = '取消置顶';
        var color = 'success';
        if (data.value==2) {
            value = 1;
            status = '未置顶';
            title = '置顶';
            color = 'default';
        }
    } else if (field=='status') {
        var value = 2;
        var status = '已下线';
        var title = '上线';
        var color = 'default';
        if (data.value==2) {
            value = 1;
            status = '正常';
            title = '下线';
            color = 'success';
        }
    }

    var obj = this;
    $.post('topstatus', {
        'id': id,
        'field': field,
        'value': value
    }, function (data) {
        if (data.code == 2) {
            $(obj).html('<span class="label label-'+color+' radius">'+status+'</span>');
            $(obj).data('value', value);
            $(obj).attr('title',title);
        } else {
            layer.msg('操作失败, 请稍后再试', {
                icon: 5,
                time: 1000
            });
        }
    }, 'json');
    return 0;
});
</script>
<!--/请在上方写此页面业务相关的脚本-->